<template>
    <div class="login-form-template">
        <span class="title" v-if="isLogin">账号登录</span>
        <el-form :model="ruleForm" status-icon :rules="rules" :style="{ width: isLogin || direction == 'top' ? '285px' : '385px' }" ref="ruleForm" :label-width="isLogin ? '0' : '100px'" :label-position="direction" label-suffix=":">
            <el-form-item prop="userName" :label="isLogin ? '' : '用户名'">
                <el-input prefix-icon="el-icon-user" v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item prop="password" :label="isLogin ? '' : '密码'">
                <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item prop="rePassword" v-if="!isLogin" :label="isLogin ? '' : '确认密码'">
                <el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.rePassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="mtBg" @click="loginIn">{{ isLogin ? '登录' : '注册' }}</el-button>
            </el-form-item>
            <p class="isLogin" v-if="isLogin">还没有账号？<span class="mtColor" @click="toRegister">免费注册</span></p>

            <el-form-item>
                <div class="protocol">
                    <label for="check">
                        <!-- 提示 -->
                        <el-tooltip class="item" effect="dark" content="请先阅读并勾选用户协议" placement="top-start" :enterable="false" :disabled="isDisabled" v-model="isShow">
                            <i :class="isChecked ? 'mtBg el-icon-check' : ''"></i>
                        </el-tooltip>

                        <input type="checkbox" v-model="isChecked" name="" id="check" />
                    </label>

                    <p class="_protocol">我已阅读并同意<a class="mtColor">《美团用户协议》</a><a class="mtColor">《隐私政策》</a> ，并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理</p>
                </div>
            </el-form-item>

            <div class="official-partner" v-if="isLogin">
                <p>合作网站账号登录</p>
                <div class="partner">
                    <span @click="routerLink('qq')" class="qq"></span>
                    <span @click="routerLink('sina')" class="xinlang"></span>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'ruleForm',
    props: {
        isLogin: {
            type: Boolean,
            default: true,
        },
    },
    
    data() {
        const checkRePass = (rule, value, callback) => {
            if (value !== this.ruleForm.password) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
        }
        return {
            isChecked: false, //是否勾选checkbox
            // isDisabled: false, //是否禁用tooltip
            isShow: false, //是否展示
            timer: null, //定时器
            direction: 'right',
            ruleForm: {
                userName: 'admin123',
                password: '123456',
                rePassword: '123456',
            },
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 5, max: 12, message: '请输入5-12用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '请输入6-16位密码', trigger: 'blur' },
                ],
                rePassword: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                    { validator: checkRePass, trigger: 'blur' },
                ],
            },
        }
    },
    mounted() {
        this.$refs.ruleForm.resetFields()
        if (this.isLogin) return
        var throttle = function (time) {   //防抖
            var timer = null
            return function (callback) {
                if (timer) {
                    return
                }
                timer = setTimeout(() => {
                    callback && callback()
                    clearTimeout(timer)
                    timer = null
                }, time)
            }
        }
        var t = throttle(100)

        window.onresize = () => {
            t(() => {
                if (document.body.offsetWidth < 590) {
                    this.direction = 'top'
                } else {
                    this.direction = 'right'
                }
                console.log('sss')
            })
        }
    },
    computed: {
        isDisabled() {
            return !this.isShow
        },
    },
    methods: {
        loginIn() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid && this.isConfirm()) {
                    let res
                    if (this.isLogin) {
                        res = await this.$store.dispatch('loginIn', this.ruleForm)
                    } else {
                        res = await this.$store.dispatch('register', this.ruleForm)
                    }
                    if (res.status == 'fail') {
                        this.$message.error(res.msg)
                    } else {
                        this.$message.success(res.msg)
                        this.$router.replace("/home")
                    }
                }
            })
        },

        routerLink(val) {
            //外部跳转
            if (this.isConfirm()) {
                window.open(`http://www.baidu.com?s?${val}`, '_blank')
            }
        },
        isConfirm() {
            // 是否勾选  阅读协议
            if (!this.isChecked) {
                this.isShow = true
                this.timer = setTimeout(() => {
                    this.isShow = false
                    clearTimeout(this.timer)
                    this.timer = null
                }, 2500)
                return false
            } else {
                return true
            }
        },
        toRegister() {
            this.$router.push('/register')
        },
    },
    beforeDestroy() {
        clearTimeout(this.timer)
        this.timer = null
        window.onresize = null
    },
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 580px) {
    .ruleForm {
        width: 285px !important;
    }
}

div.login-form-template {
    margin: 10px;
    span.title {
        display: inline-block;
        padding: 10px 0;
        font-size: 14px;
    }
    /deep/label.el-form-item__label {
        padding-bottom: 0 !important;
    }
    .el-button {
        width: 100%;
        font-weight: bolder;
        color: #000;
        margin-top: 10px;
        letter-spacing: 2px;
    }
    p.isLogin {
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin: 10px 0;
        & > span {
            cursor: pointer;
        }
    }
    div.protocol {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        label[for='check'] {
            position: relative;
            display: inline-block;
            height: 20px;
            width: 20px;
            i {
                position: absolute;
                border: 1px solid #aaa;
                border-radius: 50%;
                height: 15px;
                width: 15px;
                top: 3px;
                line-height: 15px;
                text-align: center;
            }
            input[type='checkbox'] {
                position: absolute;
                visibility: hidden;
            }
        }
        p._protocol {
            display: inline-block;
            width: 255px;
            line-height: 20px;
            font-size: 14px;
            color: #555;
            margin: 0;
            a {
                white-space: pre-wrap;
            }
        }
    }
    div.official-partner {
        position: relative;
        margin-top: 10px;
        &:after {
            content: '';
            position: absolute;
            height: 0;
            border-top: 1px solid #ccc;
            width: 100%;
            left: 0;
            top: 12px;
            z-index: -1;
        }
        p {
            text-align: center;
            width: 140px;
            margin: 0 auto;
            color: #555;
            height: 24px;
            line-height: 24px;
            z-index: 3;
            background: #fff;
        }
        div.partner {
            margin: 20px auto;
            width: 60px;
            display: flex;
            justify-content: space-between;
            span {
                display: inline-block;
                height: 20px;
                width: 20px;
                opacity: 0.5;
                cursor: pointer;
                &.qq {
                    background: url(../static/qq.svg);
                    background-size: 100% 100%;
                }
                &.xinlang {
                    background: url(../static/xinlang.svg);
                    background-size: 100% 100%;
                }
                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }
}
</style>
